import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter01/utils/preventRepeatActionUtil.dart';

class PracticeIndex extends StatefulWidget {
  @override
  _PracticeIndex createState() => _PracticeIndex();
}

class _PracticeIndex extends State<PracticeIndex> {
  List<String> _tags = ["Android", "Ios", "Flutter", "Vue", "React"];
  List<String> _selectedTags = [];
  TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(() {
      print(_textEditingController.text);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('练习')),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: SingleChildScrollView(
          child: Column(children: [
            TextField(
              autofocus:true,
              keyboardType:TextInputType.number,
              controller: _textEditingController,
              decoration: InputDecoration(
                labelText: '请输入',
              ),
            ),
            SizedBox(height:10),
            Container(
              width: double.infinity,
              height: 20,
              decoration: BoxDecoration(border: Border.all(color: Colors.red)),
            ),
            ElevatedButton(onPressed: (){}, child: Text('button with NoSplash'),style:ElevatedButton.styleFrom(splashFactory: NoSplash.splashFactory)),
            ElevatedButton(
                child: Text('throttle'),
                onPressed: PreventRepeatActionUtil.throttle(() {
                  print('throttle');
                }, delay: Duration(seconds: 2))),
            ElevatedButton(
                onPressed: PreventRepeatActionUtil.debounce(() {
                  print('debounce');
                }, delay: Duration(seconds: 2)),
                child: Text('debounce')),
            ListView(
              scrollDirection: Axis.vertical,

              /// shrinkWrap：该属性表示是否根据子组件的总长度来设置ListView的长度，默认值为false 。
              /// 默认情况下，ListView的会在滚动方向尽可能多的占用空间。
              /// 当ListView在一个无边界(滚动方向上)的容器中时，shrinkWrap必须为true。
              shrinkWrap: true,
              children: [
                ListTile(
                    leading: Icon(Icons.camera_alt), title: Text('camera_alt')),
                ListTile(
                    leading: Icon(Icons.camera_alt), title: Text('camera_alt')),
                ListTile(
                    leading: Icon(Icons.camera_alt), title: Text('camera_alt')),
                ListTile(
                    leading: Icon(Icons.camera_alt), title: Text('camera_alt')),
              ],
            ),
            ListView.builder(
                itemCount: 5,
                shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    child: Text('item $index'),
                  );
                }),
            Container(
              width: double.infinity,
              child: Wrap(
                children: [
                  ClipOval(
                    child: Container(
                      width: 50,
                      height: 50,
                      color: Colors.green,
                    ),
                  ),
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(25),
                        gradient: LinearGradient(
                            colors: [Colors.deepOrange, Colors.orange])),
                  ),
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                        color: Colors.blue,
                        shape: BoxShape.circle,
                        gradient: LinearGradient(
                            colors: [Colors.cyan, Colors.cyanAccent])),
                  ),
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(25),
                        bottomRight: Radius.circular(25)),
                    child: Container(
                      width: 100,
                      height: 50,
                      decoration: BoxDecoration(
                        color: Colors.blue,
                      ),
                    ),
                  ),
                  Container(
                    width: 100,
                    height: 50,
                    decoration: BoxDecoration(
                      color: Colors.amber,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(25),
                          bottomRight: Radius.circular(25)),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              width:300,
              height:100,
              alignment: Alignment.center,
              decoration: BoxDecoration(border: Border.all(color:Colors.red)),
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                /// BouncingScrollPhysics ：允许滚动超出边界，但之后内容会反弹回来。
                /// ClampingScrollPhysics ： 防止滚动超出边界，夹住 。
                /// AlwaysScrollableScrollPhysics ：始终响应用户的滚动。
                /// NeverScrollableScrollPhysics ：不响应用户的滚动。
                physics: ClampingScrollPhysics(),
                child: Row(children:[
                  ...List.generate(100, (index) => Text('$index',style:TextStyle(fontSize: 20))).toList()
                ]),
              ),
            ),
            Container(
              color: Colors.yellow,

              /// IndexedStack继承自Stack，它的作用是显示第index个child，其他child都是不可见的。所以IndexedStack的尺寸永远是跟最大的子节点尺寸一致。
              child: IndexedStack(
                index: 1,
                alignment: const Alignment(0.6, 0.6),
                children: [
                  CircleAvatar(
                    backgroundImage: AssetImage('images/training/figure.png'),
                    radius: 50.0,
                  ),
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.black45,
                    ),
                    child: Text(
                      'Mia B',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                Chip(
                  label: Text('Flutter'),
                ),
                Chip(
                  label: Text('Flutter'),
                  backgroundColor: Colors.orange,
                ),
                Chip(
                    label: Text('Flutter'),
                    avatar: CircleAvatar(
                        backgroundColor: Colors.green, child: Text('M'))),
                Chip(
                    label: Text('Flutter'),
                    avatar: CircleAvatar(
                      backgroundColor: Colors.green,
                      child: Text('M'),
                      backgroundImage: AssetImage('images/training/figure.png'),
                      // foregroundImage: AssetImage('images/training/figure.png'),
                      foregroundColor: Colors.red[500],
                    )),
                Chip(
                    label: Text('Flutter'),
                    onDeleted: () {},
                    deleteIcon: Icon(Icons.delete),
                    deleteIconColor: Colors.redAccent,
                    avatar: CircleAvatar(
                      backgroundColor: Colors.green,
                      child: Text('M'),
                      // backgroundImage: AssetImage('images/training/figure.png'),
                      foregroundImage: AssetImage('images/training/figure.png'),
                      foregroundColor: Colors.red[500],
                    ))
              ],
            ),
            Divider(
              color: Colors.greenAccent,
              thickness: 2,
              indent: 10,
              endIndent: 10,
            ),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: _tags.map((tag) {
                return Chip(
                  label: Text(tag),
                  onDeleted: () {
                    setState(() {
                      _tags.remove(tag);
                    });
                  },
                );
              }).toList(),
            ),
            Divider(
              color: Colors.redAccent,
              thickness: 2,
              indent: 10,
              endIndent: 10,
            ),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: _tags.map((tag) {
                return ActionChip(
                  label: Text(tag),
                  onPressed: () {
                    setState(() {
                      // _tags.remove(tag);
                    });
                  },
                );
              }).toList(),
            ),
            Divider(
              color: Colors.blueAccent,
              thickness: 2,
              indent: 10,
              endIndent: 10,
            ),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: _tags.map((tag) {
                return FilterChip(
                  label: Text(tag),
                  selected: _selectedTags.contains(tag),
                  selectedColor: Colors.blue[400],
                  onSelected: (value) {
                    setState(() {
                      if (_selectedTags.contains(tag)) {
                        _selectedTags.remove(tag);
                      } else {
                        _selectedTags.add(tag);
                      }
                    });
                  },
                );
              }).toList(),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              padding: EdgeInsets.all(10),
              child: OverflowBox(
                alignment: Alignment.topLeft,
                minWidth: 50,
                minHeight: 50,
                maxWidth: 150,
                maxHeight: 150,
                child: Container(
                  width: 300,
                  height: 300,
                  color: Colors.grey,
                  alignment: Alignment.center,
                  child: RotatedBox(
                    quarterTurns: 2,
                    child: Text(
                      'ABCD',
                      style: TextStyle(color: Colors.red),
                    ),
                  ),
                ),
              ),
            ),
             ClipRect(
                child: Banner(
                  message:'banner',
                  textStyle: TextStyle(color:Colors.blue),
                  color:Colors.yellow,
                  location:BannerLocation.topEnd, // topStart
                  child:  Container(
                    width:200,
                    height:200,
                    color:Colors.red,
                    child:FlutterLogo(),
                ),
              ),
            ),
            Container(
              width:double.infinity,
              height:300,
              decoration: BoxDecoration(
                border:Border.all(color:Colors.red),
              ),
              child: Diagonal(children: [
                Text('abc'),
                FlutterLogo(size:50),
                Text('def'),
                FlutterLogo(size:100),
                Text('hij'),
                FlutterLogo(size:50),
                Text('klm'),
              ],)
            ),

          ]),
        ),
      ),
    );
  }
}

class DiagonalLayout extends MultiChildLayoutDelegate{
  @override
  void performLayout(Size size) {
    Offset offset = Offset.zero;
    for(int i=0;;i++){
      if(hasChild(i)){
        final childSize = layoutChild(i,BoxConstraints.loose(size));
        positionChild(i, offset);
        offset += Offset(childSize.width,childSize.height);
      }else{
        break;
      }
    }
  }

  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) {
    return false;
  }

}

class Diagonal extends StatelessWidget {
  final List<Widget> children;
  const Diagonal({Key? key, required this.children}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return CustomMultiChildLayout(delegate: DiagonalLayout(),children: [
      for(int i=0;i<children.length;i++)
        LayoutId(
          id:i,
          child:children[i],
        ),
    ],);
  }
}

